<template>
  <view class="container">
    <view class="login-form">
      <input type="text" class="input" placeholder="请输入账号" v-model="account"/>
      <input type="password" class="input" placeholder="请输入密码" v-model="password"/>

      <button class="submit" type="primary" @click="login" :disabled="!isAgreementChecked">注册</button>

      <checkbox-group @change="checkAgreementChange">
        <label class="agreement-label">
          <checkbox value="1" :checked="isAgreementChecked"></checkbox>
          我已阅读并同意
          <text class="blue-link" @click="showAgreement">注册协议</text>
        </label>
      </checkbox-group>
    </view>
    <view class="login-switch">
      <text class="blue-link" @click="changeLoginType(1)">去登录</text>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      account: '',
      password: '',
      isAgreementChecked: false, // 注册协议勾选状态
      currentLoginType: 0, // 0: 账号密码登录, 1: 验证码登录, 2: 微信登录
    };
  },
  methods: {
    login() {
      if (!this.isAgreementChecked) {
        uni.showToast({
          title: '请先同意注册协议或选择正确的登录方式',
          icon: 'none'
        });
        return;
      }

      if (this.currentLoginType === 0 && this.isAgreementChecked) {

        app.globalData._post_form(
            'user/app_reg', {
              phone: this.account,
              password: this.password,
              referee_id: uni.getStorageSync('referee_id')
            },
            function (result) {

              if (result.code == 1) {
                uni.showToast({
                  title: result.msg,
                  icon: 'success',
                });
                // 记录token user_id
                uni.setStorageSync('token', result.data.token);
                uni.setStorageSync('user_id', result.data.user_id);
                uni.switchTab({
                  url: '/pages/index/index'
                });
              } else if (result.code == 400) {
                uni.showToast({
                  title: result.msg,
                  icon: 'none',
                });
              } else {
                uni.showToast({
                  title: '注册失败',
                  icon: 'none',
                });
              }
            },
            function () {
              uni.showToast({
                title: '注册失败',
                icon: 'none',
              })
            },
            function () {
              uni.hideLoading();
            }
        );


      }

    },
    checkAgreementChange(e) {
      const values = e.detail.value;
      this.isAgreementChecked = values.length > 0;
    },
    changeLoginType(type) {
      this.currentLoginType = type;
      // 根据type切换不同的登录方式界面或逻辑
      if (type === 1) {
        uni.navigateTo({
          url: '/pages/login/form/index'
        })
      }
    },
    showAgreement() {
      // 显示注册协议的逻辑，这里可以是一个弹窗或者跳转到新的页面
      uni.showModal({
        title: '注册协议',
        content: '这里是注册协议的详细内容...',
        showCancel: false
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.login-form {
  width: 100%;
  max-width: 300px;
}

.input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.submit {
  margin-top: 60rpx;
}

.login-switch {
  margin-top: 200rpx;
  display: flex;
  justify-content: space-around;
}

.blue-link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 10px;
  /* 增加间隔 */
}

.agreement-label {
  margin-top: 60rpx;
  display: flex;
  align-items: center;
}

checkbox {
  margin-right: 5px;
  /* 与文本之间的间隔 */
}
</style>
